<script setup lang="ts">
import {defineProps, onMounted, ref} from "vue";
import {teamType} from "../models/team";
import request from "../plugins/request.js";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import {getCurrentUser} from "../service/user";
import {userType} from "../models/user";
import {useRoute, useRouter} from "vue-router";
const currentUser = ref<null | userType>({})
onMounted(async () => {
  // 获取当前登录用户信息
  currentUser.value = await getCurrentUser()


})

const router = useRouter()
const route = useRoute()

// 定义一个类型
interface TeamCardListProps{
  teamList: teamType[];
}
// 获取父组件传来的数据
const props = defineProps<TeamCardListProps>();
/**
 * 加入队伍
 */
const doJoinTeam = (name: string, teamId: number) =>{
  // 是否加入队伍
  showConfirmDialog({
    title: '加入队伍',
    message:
        `是否加入${name}的队伍`,
  })
      .then(async () => {
        // on confirm
        const result = await request.post('/team/join',{
          teamId
        })
        console.log(result)
        const {code,description} = result
        if (code === 200){
          showSuccessToast('加入成功')
        }else if (''!==description){
          showFailToast(description)
        }
      })
}

const doEditTeam = (id)=>{
  router.push({
    path: '/team/edit',
    query: {
      id
    }
  })
}

const doExitTeam = async (teamId: number) => {
  const result = await request.put(`/team/exit/${teamId}`)
  console.log(result)
  const {code} = result
  if (code === 200){
    showSuccessToast('退出队伍成功')
    location.reload()
  }
  else {
    showFailToast('退出队伍失败')
  }
}

const doDeleteTeam = async (teamId: number) => {
  const result = await request.delete(`/team/delete/${teamId}`)
  console.log(result)
  const {code} = result
  if (code === 200){
    showSuccessToast('解散队伍成功')
    location.reload()
  }
  else {
    showFailToast('解散队伍失败')
  }
}

</script>

<template>

  <van-card v-for="team in props.teamList" tag="vip" :desc="team.description" :title="team.name" thumb="https://imgo.youxiniao.com/img2020/1/20/15/2020012079347580_APP.jpg"
  >
    <template #bottom>
      <div>队伍人数：{{team.userIds.length}}/{{team.maxNum}}</div>
      <div>创建时间：{{team.createTime}}</div>
    </template>
    <template #tags>
      <van-tag plain style="margin: 4px 4px 0 0" type="primary">
        装修中
      </van-tag>
    </template>
    <template #price>
      <div style="vertical-align: middle">
        创建人:  <van-tag type="success">{{team.createUser?.username}}</van-tag>
      </div>
    </template>
    <template #footer>
      <div v-if="currentUser">
        <!--修改队伍仅创建者可见 -->
        <van-button v-if="currentUser?.id === team.createUser.id" size="mini" type="primary" @click="doEditTeam(team.id)" >修改队伍</van-button>
        <!--加入队伍仅未加入可见 -->
        <van-button v-if="currentUser?.id !==team.createUser.id && !team.userIds.includes(currentUser.id)" size="mini" type="success" @click="doJoinTeam(team.name,team.id)">加入队伍</van-button>
        <!--仅加入者可见 创建者不可见 -->
        <van-button v-if="currentUser?.id !==team.createUser.id && team.userIds.includes(currentUser.id)" size="mini" type="warning" @click="doExitTeam(team.id)" >退出队伍</van-button>
        <!--修改队伍仅创建者可见 -->
        <van-button v-if="currentUser?.id === team.createUser.id" size="mini" type="danger" @click="doDeleteTeam(team.id)" >解散队伍</van-button>
      </div>
    </template>
  </van-card>

</template>

<style scoped>
:deep( .van-image__img){
  height: 100px;
  margin-top: 10px;
}

</style>